<template>
	<div class="wrap">
		<el-form :model="state.form" ref="formRef">
			<el-form-item label="阶梯">
				<el-input v-model="i.val" class="ipt" v-for="i in state.ruleArr" :key="i"></el-input>
				<el-icon size="24" class="add_icon" @click="handleAdd"><CirclePlus /></el-icon>
			</el-form-item>

			<!-- <el-form-item label="阶梯">
				<el-input v-model="i.val" class="ipt" v-for="i in state.ruleArr" :key="i"></el-input>
				<el-icon size="24" class="add_icon" @click="handleAdd"><CirclePlus /></el-icon>
			</el-form-item> -->
		</el-form>
		<el-button type="primary" @click="handleSubmit">提交</el-button>
	</div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
const formRef = ref()
const state = reactive({
	form: {},
	ruleArr: [{ key: '', val: '', label: '' }],
	ipt: ''
})

const handleAdd = () => {
	state.ruleArr.push({
		label: '',
		key: '',
		val: ''
	})
}

const handleSubmit = () => {
	console.log('#', state.ruleArr)
	const arr = [{ a: 1, aaa: '测试' }, { b: 2, bb: '测试2' }, { c: 3 }, { d: 4 }, { e: 5 }, { f: 6 }]
	const newarr = arr.map(item => {
		const key = Object.keys(item) // 获取对象的第一个键
		const en = Object.entries(item)
		const val = Object.values(item)
		// return [key, item[key]] // 返回键值对
        console.log('en', en)
        console.log('val', val)
	})
	// console.log('newarr', newarr);
	// console.log(Object.values(item));
	// return
	// const map = new Map(newarr)

	// console.log('map', map.get('a'))
}

onMounted(() => {})
</script>

<style scoped lang='scss'>
.wrap {
	height: calc(100vh - 180px);
	background-color: #fff;
	overflow: hidden;
	box-sizing: border-box;
	padding: 10px;
	.ipt {
		width: 150px;
		margin: 3px;
	}
	.add_icon {
		margin-left: 10px;
	}
}
</style>